<template>
  <div class="header">
    <div class="topNav">
      <div class="container">
        <ul>
          <template>
            <li v-if="!this.name">
              <router-link to="/login">请先登录</router-link>
            </li>
            <li v-if="!this.name"><a href="javascript:;">免费注册</a></li>
            <li v-if="this.name">
              <router-link to="/home/member"><i class="iconfont">&#xe6a4;</i>{{ this.name }}</router-link>
            </li>
            <li v-if="this.name" @click="outLog">
              <a href="javascript:;">退出登录</a>
            </li>
          </template>
          <li><router-link to="/home/member">我的订单</router-link></li>
          <li><a href="javascript:;">会员中心</a></li>
          <li><a href="javascript:;">帮助中心</a></li>
          <li><a href="javascript:;">关于我们</a></li>
          <li><a href="javascript:;"><i class="iconfont">&#xe63e;</i>手机版</a></li>
        </ul>
      </div>
    </div>
    <div class="bottomNav">
      <div class="container">
        <a class="logo" href="javascript:;"></a>
        <Nav></Nav>
        <div class="search">
          <i class="iconfont">&#xe86e;</i>
          <input type="text" placeholder="搜一搜" />
        </div>

        <div class="cart">
          <el-badge :value="cartCount" class="item">
            <router-link to="/home/cart">
              <i class="iconfont">&#xe619;</i>
            </router-link>
          </el-badge>
          <div class="cartCon">
            <div class="list">
              <div v-for="item in cartList" :key="item.skuId" class="item">
                <router-link to="/home/cart">
                  <img :src="item.picture" alt="" />
                  <div class="info">
                    <p class="name">{{ item.name }}</p>
                    <p class="attr">{{ item.attrsText }}</p>
                  </div>
                  <div class="msg">
                    <p class="price">￥{{ item.price }}</p>
                    <p class="count">x{{ item.count }}</p>
                  </div>
                </router-link>
                <i class="iconfont" @click="remove(item.skuId)">&#xe604;</i>
              </div>
            </div>
            <div class="foot">
              <div class="total">
                <p>共{{ cartCount }}件商品</p>
                <p>￥{{ AllPrice }}</p>
              </div>
              <router-link tag="button" to="/home/cart"
                >去购物车结算</router-link
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Nav from "./Nav.vue";
export default {
  name: "Header",
  props: {},
  components: {
    Nav,
  },
  data() {
    return {
      name: "",
      cartCount: 0,
      cartList: [],
      head: [],
      name: "",
      name:"",
      head: []
    };
  },
  methods: {
    //初始化数据
    init() {
      //判断登录
      this.name = localStorage.getItem("name");
      this.cartInfo();
    },
    cartInfo() {
      //获取购物车数量
      this.$axios.get("/member/cart/count").then((res) => {
        this.cartCount = res.data.result.count;
      });
      //获取购物车列表
      this.$axios.get("/member/cart").then((res) => {
        this.cartList = res.data.result;
        console.log(res.data.result)
      });
    },
    //退出登录
    outLog() {
      localStorage.removeItem("name");
      localStorage.setItem(
        "erabbit-client-pc-124-store",
        JSON.stringify({ cart: {}, user: { profile: {}, redirectUrl: "/" } })
      );
      this.$router.push("/login");
    }

  },
  computed: {
    AllPrice() {
      return eval(
        this.cartList.map((item) => item.price * item.count).join("+")
      );
    },
  },
  mounted() {
    this.init();
  },
  created() {

    this.name = localStorage.getItem("name")
  }
};
</script>

<style scoped lang="less">
.header {
  .topNav {
    background: #333;

    ul {
      font-size: 14px;
      display: flex;
      height: 53px;
      justify-content: flex-end;
      align-items: center;

      li {
        a {
          border-left: 2px solid #666;
          padding: 0 15px;
          color: #cdcdcd;
          line-height: 1;
          display: inline-block;

          &:hover {
            color: #27ba9b;

          }
        }

        &:first-child a {
          border: none;
        }
      }
    }
  }

  .bottomNav {
    background: white;
    z-index: 99;
    .container {
      position: relative;
      display: flex;
      align-items: center;
      z-index: 100;
      .logo {
        display: block;
        height: 132px;
        width: 200px;
        text-indent: -9999px;
        background: url(http://erabbit.itheima.net/img/logo.0940ebb5.png)
          no-repeat center 18px / contain;
      }

      .search {
        width: 170px;
        height: 32px;
        position: relative;
        line-height: 32px;
        border-bottom: 1px solid rgb(231, 231, 231);
        display: flex;

        i {
          font-size: 20px;
        }

        input {
          width: 150px;
        }
      }

      .cart {
        position: relative;
        width: 50px;
        height: 32px;
        z-index: 99;
        a > i {
          color: #333;
          font-size: 26px;
        }
        &:hover .cartCon {
          height: 400px;
          padding-top: 10px;
          // overflow: visible;
        }
        .cartCon {
          transition: all 0.4s 0.2s;
          width: 400px;
          height: 0px;
          overflow: hidden;
          position: absolute;
          top: 50px;
          right: 0;
          z-index: 999;
          box-shadow: 0 0 10px rgb(0 0 0 / 20%);
          background: #fff;
          border-radius: 4px;
          box-sizing: border-box;
          &:before {
            content: "";
            position: absolute;
            right: 14px;
            top: -10px;
            width: 20px;
            height: 20px;
            background: #fff;
            transform: scaleX(0.6) rotate(45deg);
            box-shadow: -3px -3px 5px rgb(0 0 0 / 10%);
          }
          .list {
            height: 310px;
            overflow: auto;
            padding: 0 10px;
            .item {
              border-bottom: 1px solid #f5f5f5;
              padding: 10px 0;
              position: relative;
              &:hover i {
                opacity: 1;
              }
              i {
                position: absolute;
                bottom: 38px;
                right: 0;
                opacity: 0;
                color: #666;
                font-size: 18;
                transition: all 0.5s;
                cursor: pointer;
              }
              a {
                display: flex;
                align-items: center;
                color: #333;
                img {
                  width: 80px;
                  height: 80px;
                }
                p {
                  text-overflow: ellipsis;
                  overflow: hidden;
                }
                .info {
                  width: 180px;
                  padding: 0 10px;
                  .name {
                    word-break: break-all;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                  }
                  .attr {
                    white-space: nowrap;
                    color: #999;
                    padding-top: 5px;
                  }
                }
                .msg {
                  text-align: center;
                  .price {
                    color: #cf4444;
                  }
                  .count {
                    color: #999;
                    margin-top: 5px;
                    font-size: 16px;
                  }
                }
              }
            }
          }
          .foot {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 70px;
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            background: #f8f8f8;
            align-items: center;
            .total {
              padding-left: 10px;
              color: #999;
              & > p:last-child {
                font-size: 18px;
                color: #cf4444;
              }
            }
            button {
              color: #27ba9b;
              background: #e6faf6;
              width: 180px;
              height: 50px;
              font-size: 16px;
              text-align: center;
              border: 1px solid #27ba9b;
              border-radius: 4px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>